<template>
  <div class="article_content">
    <div class="title">{{articleInf.title}}</div>
    <div class="author">作者:{{articleInf.author}}</div>
    <div class="content" v-html="articleInf.content"></div>
  </div>
</template>

<script>
  import API from '../../API';
  export default {
    name: "articleContent",
    data:function () {
      return {
        articleInf:{
          content:'',
          author:'',
          title:''
        }
      }
    },
    mounted:function () {
      this.getArticleInf(this.$route.params.id);
    },
    methods:{
      getArticleInf:function (id) {
        API.get.getArticleContent({id}).then((result)=>{
          console.log('result:',result);
          const {author, title, content} = result.data.result;
          this.articleInf.author = author;
          this.articleInf.title = title;
          const pattern = /\n/g;
          this.articleInf.content = content.replace(pattern,'<br>');
        });
      }
    }

  }
</script>

<style scoped lang="less">
  .article_content{
    width: 620px;
    margin: 0 auto;
  }

  .title{
    margin: 20px 0 0 0;
    font-size: 34px;
    font-weight: 700;
    line-height: 1.3;
  }

  .author{
    font-size: 17px;
    margin: 30px 0 40px;
  }

  .content{
    font-size: 16px;
    font-weight: 400;
    line-height: 1.7;
  }
</style>
